<template>
    <div>
        <div>
            <el-input
                    style="width: 100px;margin-right: 8px"
                    placeholder="类型"
                    v-model="acc.type">
            </el-input>
            <el-input
                    type="number"
                    style="width: 150px;margin-right: 8px"
                    placeholder="价格"
                    v-model="acc.price">
                <template slot="append">元</template>
            </el-input>
            <el-input
                    style="width: 300px;margin-right: 8px"
                    placeholder="描述"
                    v-model="acc.description"
                    @keydown.enter.native="addAccount">
            </el-input>
            <el-select style="margin-right: 8px"
                       v-model="acc.payFrom" placeholder="付款方式">
                <el-option
                        v-for="item in payFroms"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
            <el-button icon="el-icon-plus" type="primary" @click="addAccount">记一笔</el-button>
        </div>
        <div style="padding-top: 20px">
            <el-table
                    :data="accs"
                    border
                    stripe
                    style="width: 80%">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        width="70">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        width="80">
                    <template slot-scope="scope">
                        <el-tag style="padding: 0px 3px">{{scope.row.price}}元</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="描述"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="payFrom"
                        label="付款方式"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="createdDate"
                        label="创建时间"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="showEditView(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="修改记录"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :rules="rules" ref="hrForm" :model="updateAcc" label-width="80px"
                     label-position="right">
                <el-form-item prop="type" label="类型">
                    <el-input style="width: 200px" v-model="updateAcc.type"></el-input>
                </el-form-item>
                <el-form-item prop="price" label="价格">
                    <el-input type="number" style="width: 200px" v-model="updateAcc.price"></el-input>
                </el-form-item>
                <el-form-item prop="description" label="描述">
                    <el-input style="width: 250px" v-model="updateAcc.description"></el-input>
                </el-form-item>
                <el-form-item prop="payFrom" label="付款方式">
                    <el-select style="margin-right: 8px;width: 200px"
                               v-model="updateAcc.payFrom" placeholder="付款方式">
                        <el-option
                                v-for="item in payFroms"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "AccBasic",
        data(){
            return{
                accs:[],
                acc:{
                    type:'',
                    price:'',
                    description:'',
                    payFrom:'支付宝',
                },
                payFroms: ['支付宝','京东','淘宝','天猫','微信','QQ','现金',"银行卡","其他"],
                updateAcc:{
                    type:'',
                    price:'',
                    description:'',
                    payFrom:'',
                },
                dialogVisible:false,
                rules: {
                    type: [{required: true, message: '请输入类型', trigger: 'blur'}],
                    price: [{required: true, message: '请输入价格', trigger: 'blur'}],
                    description: [{required: true, message: '请输入描述', trigger: 'blur'}],
                    payFrom: [{required: true, message: '请输入付款方式', trigger: 'blur'}],
                },
            }
        },
        mounted() {
            this.initAcc();
        },
        methods:{
            doUpdate(){
                this.putRequest("/acc/basic/",this.updateAcc).then(resp=>{
                    if (resp){
                        this.initAcc();
                    }
                    this.dialogVisible=false;
                })
            },
            handleDelete(index,data){
                this.$confirm('此操作将永久删除次记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/acc/basic/"+data.id).then(resp=>{
                        if (resp){
                            this.initAcc();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showEditView(index,data){
                Object.assign(this.updateAcc, data);
                this.dialogVisible=true;
            },
            initAcc(){
                this.getRequest("/acc/basic/").then(resp=>{
                    if (resp){
                        this.accs = resp;
                    }
                })
            },
            addAccount(){
                if (this.acc.type && this.acc.price && this.acc.description && this.acc.description ){
                    this.postRequest("/acc/basic/",this.acc).then(resp=>{
                        if (resp){
                            this.initAcc();
                            this.acc = {};
                            this.acc.payFrom="支付宝";
                        }
                    })
                } else {
                    this.$message.error('字段不能为空');
                }
            },
        }
    }
</script>

<style scoped>

</style>